<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div id="wrapper">
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-body">
                    <button id="btn-del-customer" type="button" class="btn btn-danger">取消客户</button>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">订单列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-borderdetailed table-hover" id="list">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>手机号码</th>
                                    <th>身份证号</th>

                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
    <!-- Page-Scripts  -->
    <script>
        $(document).ready(function() {
            var table = $('#list').DataTable({   //此处list与页面table的id相同
                ajax: '${contextPath}/cart/detailCustomer',
                language: {
                    "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
                },
                columns: [
                    {data: "id","visible" : false},
                    {data: "customerName"},
                    {data: "sex"},
                    {data: "phone"},
                    {data: "IDCard"}
                    /* {data: "seatName"}, */
                ],
                responsive: true,
                select: true //datatables select 插件
            });
            /* 取消客户按钮 */
            $('#btn-del-customer').click(function() {
                var rowData = table.rows({
                    selected: true
                }).data().toArray();
                if (rowData.length == 1) {
                    var id = rowData[0].id;
                    $.ajax({
                        type: "get",
                        url: "${contextPath}/cart/removeCustomer?customerId=" + id,
                        dataType: "json",
                        success: function (json) {
                            if (!json.result) {
                                layer.msg(json.msg, {
                                    time: 1000,
                                    icon: 2
                                });
                            } else {
                                layer.msg(json.msg, {
                                    time: 1000,
                                    icon: 1,
                                    end:function(index){
                                        table.ajax.reload();
                                    }
                                });
                            }
                        },
                        error: function () {
                            layer.msg('系统出错!', {
                                time: 1000,
                                icon: 2
                            });
                        },

                    });
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    }); //layer弹出层，1000代表1秒后关闭。7为图标编号
                }

            });








        });
    </script>
</body>

</html>